;$(function () {

    layui.use('layer', function () {
        var layer = layui.layer;

        /**
         * 用于户型图更新
         */
        window.sessionStorage.removeItem('vr_img_id')
        window.sessionStorage.setItem('vr_img_id', $('.panos_itemActive.active').attr('data-name'))

        $('#floorDetailTrigger').click(function (e) {
            e.stopPropagation()
            if(window.sessionStorage.getItem('is_open_clear') === '1') {

            } else {
                getFloorDetail()
            }
        })

        getFloorDetail()

        openFloorPlan()
        closeFloorPlan()
        openFloorPlanFullScreen()

    });

    function openFloorPlan() {
        var floorPlanDetailContainer = $('.floor-planDetail-container');
        $('.floor-planDetail-openWrap').click(function () {
            $(this).toggle()

            if (floorPlanDetailContainer.hasClass('open')) {
                floorPlanDetailContainer.remove('open')
            } else {
                floorPlanDetailContainer.addClass('open')
            }

        })
    }

    function closeFloorPlan() {
        $('.floor-plan-footerIcon.close').click(function () {
            $('.floor-planDetail-container').removeClass('open')
            setTimeout(function () {
                $('.floor-planDetail-openWrap').show()
            }, 300)
        })
    }

    function openFloorPlanFullScreen() {
        $('.floor-plan-footerIcon.fullscreen').click(function () {
            $('.floor-plan-detail-layer-mask').toggle()
        })
    }

    function getFloorDetail() {
        var vrImgId = window.sessionStorage.getItem('vr_img_id')
        $.ajax({
            url: '/v2/vr/vr_map/detail',
            type: 'GET',
            data: {
                vr_id: $('#vr-index-detail-id').val(),
                vr_img_id: vrImgId
            },
            success: function (res) {
                if (res.status === 1) {
                    res.data = $.extend({}, res.data)

                    if (res.data.map_id) {
                        if ($('.floor-planDetail-container').hasClass('open')) {
                            $('.floor-planDetail-openWrap').hide()
                        } else {
                            $('.floor-planDetail-openWrap').show()
                            $('.floor-planDetail-container').removeClass('open').addClass('close')
                        }

                        $('.floor-planDetail-open span').text(res.data.map_type_name)
                        var data = JSON.parse(JSON.stringify(res.data))
                        var data2 = JSON.parse(JSON.stringify(res.data))

                        var img = new Image()
                        img.src = data.map_img
                        img.onload = function () {
                            var getTpl = floorPlanDetailTpl.innerHTML
                            var view = document.getElementById('floorPlanDetailView');

                            var scale = 294 / img.width
                            data.map_img_width = 294
                            data.map_img_height = img.height * scale

                            _.forEach(data.map_point_info, function (value, index) {
                                var x = value.map_img_x * scale - 15
                                var y = value.map_img_y * scale - 15
                                value.map_img_x = x < 0 ? 0 : x
                                value.map_img_y = y < 0 ? 0 : y
                            });

                            laytpl(getTpl).render(data, function (html) {
                                view.innerHTML = html;
                                switchScenes()
                                setActiveMapItem()

                                tippy('[data-tippy-content]');
                            });
                        }


                        var img2 = new Image()
                        img2.src = data2.map_img
                        img2.onload = function () {
                            var getTpl2 = floorPlanDetailFullscreenTpl.innerHTML
                            var view2 = document.getElementById('floorPlanDetailFullscreenView');
                            var scale
                            if (window.screen.width < 500) {
                                // 当前设备是移动设备
                                scale = window.screen.width / img2.width
                                data2.map_img_width = window.screen.width
                            } else {
                                scale = 1000 / img2.width
                                data2.map_img_width = 1000
                            }

                            data2.map_img_height = img.height * scale

                            _.forEach(data2.map_point_info, function (value, index) {
                                var x = value.map_img_x * scale - 15
                                var y = value.map_img_y * scale - 15
                                value.map_img_x = x < 0 ? 0 : x
                                value.map_img_y = y < 0 ? 0 : y
                            });

                            laytpl(getTpl2).render(data2, function (html) {
                                view2.innerHTML = html;
                                mousewheelScaleImage()

                                $('#floorPlanDetailFullscreenView .floor-planDetail-img').draggable()
                                $('.floor-plan-detail-closeIcon').click(function (e) {
                                    e.stopPropagation()
                                    $('.floor-plan-detail-layer-mask').hide()
                                })

                                $('.floor-plan-detail-layer').click(function (e) {
                                    e.stopPropagation()
                                })

                                switchScenes()
                                setActiveMapItem()
                                tippy('[data-tippy-content]');
                            });
                        }
                    } else {
                        $('.floor-planDetail-openWrap').hide()
                        $('.floor-planDetail-container').removeClass('open').addClass('close')
                    }
                }
            }
        })
    }

    function switchScenes() {
        $('.floor-planDetail-mapItem').click(function (e) {
            e.stopPropagation()
            var vrImgId = $(this).data('vrImgId')
            var groupName = $(this).data('groupName')

            $(this).siblings().removeClass('active')
            $('#floorPlanDetailFullscreenView .floor-planDetail-mapItem').each(function (index, elem) {
                $(elem).removeClass('active')
                if ($(elem).data('vrImgId') === vrImgId) {
                    $(elem).addClass('active')
                }
            })

            $('#floorPlanDetailView .floor-planDetail-mapItem').each(function (index, elem) {
                $(elem).removeClass('active')
                if ($(elem).data('vrImgId') === vrImgId) {
                    $(elem).addClass('active')
                }
            })

            $(this).addClass('active')

            setActiveScenesActive(groupName, vrImgId)

            var krpano = document.getElementById('krpanoSWFObject');
            krpano.call("loadscene('scene_" + vrImgId + "', null, MERGE, get(blendmodes[crossblending].blend))");
        })
    }

    function setActiveScenesActive(groupName, vrImgId) {
        $('.groupsText_item').each(function (index, elem) {
            $(elem).removeClass('active')
            if ($(elem).data('tip') === groupName) {
                $(elem).addClass('active')
                $(elem).trigger('click')
            }
        })

        setTimeout(function () {
            $('.panos_itemActive').each(function (index, elem) {
                $(elem).removeClass('active')
                if ($(elem).data('name') === vrImgId) {
                    $(elem).addClass('active')
                }
            })
        }, 300)
    }

    function setActiveMapItem() {
        var vrImgId = window.sessionStorage.getItem('vr_img_id')
        if (vrImgId) {
            $('.floor-planDetail-mapItem').each(function (index, elem) {
                $(elem).removeClass('active')
                if ($(elem).data('vrImgId') === parseFloat(vrImgId)) {
                    $(elem).addClass('active')
                }
            })
        }
    }

    function zoomOut(image, width, height, mapScale) {
        var mapScaleCircle = 7.5 * mapScale
        if ((width - width * mapScale) < 294) {
            return
        }

        image.css({
            width: width - width * mapScale,
            height: height - height * mapScale
        })
        $('#floorPlanDetailFullscreenView .floor-planDetail-mapItem').each(function (index, elem) {
            var top = parseFloat($(elem).css('top').replace('px', ''))
            var left = parseFloat($(elem).css('left').replace('px', ''))
            $(elem).css({
                top: top - top * mapScale - mapScaleCircle,
                left: left - left * mapScale - mapScaleCircle
            })
        })
    }

    function zoomIn(image, width, height, mapScale) {
        var mapScaleCircle = 7.5 * mapScale
        if ((width + width * mapScale) > 2000) {
            return
        }

        image.css({
            width: width + width * mapScale,
            height: height + height * mapScale
        })

        $('#floorPlanDetailFullscreenView .floor-planDetail-mapItem').each(function (index, elem) {
            var top = parseFloat($(elem).css('top').replace('px', ''))
            var left = parseFloat($(elem).css('left').replace('px', ''))
            $(elem).css({
                top: top + top * mapScale + mapScaleCircle,
                left: left + left * mapScale + mapScaleCircle
            })
        })
    }

    function mousewheelScaleImage() {
        var scale = 10
        $(document).on('mousewheel', function (event) {
            var image = $('#image')
            var width = image.width()
            var height = image.height()

            var mapScale = scale / width

            // 放大
            if (event.originalEvent.deltaY > 0) {
                zoomOut(image, width, height, mapScale)
            } else {
                zoomIn(image, width, height, mapScale)
            }
        })
    }
})